<template>
	<view class="body">
		<view class="content">
			<!-- 模型名称标签 -->
			<view class="menuAside-top">
				<u-tabs class="item" :list="initial_map" @click="pickModel" lineWidth="30" lineHeight="7"
					lineColor="#f56c6c" :activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"
					:current="tabIndex" :inactiveStyle="{color: '#606266',transform: 'scale(1)'}"
					:lineColor="`url(${lineBg}) 100% 100%`"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>
			<!-- 模型渲染 -->
			<!-- #ifdef MP-WEIXIN -->
			<canvas type="webgl" id="webgl" class="canvas-container" @touchstart="touchStart" @touchmove="touchMove"
				@touchend="touchEnd"></canvas>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view id="webgl" class="canvas-container"></view>
			<!-- #endif -->
			<!-- 属性自定义 -->
			<view class="menuAside-bottom" v-if="showOption">
				<u-popup :show="showOption" @close="closePopup" mode="bottom" :safeAreaInsetBottom="true"
					:safeAreaInsetTop="true">

					<view class="menuAside-bottom-content">
						<!-- 左侧列表 -->
						<scroll-view class="menuAside-bottom-left" scroll-y="true" :scroll-top="10"
							scroll-with-animation>
							<view class="menuAside-bottom-left-list" v-for="(item,index) in optionList" :key="index"
								@click="tapselect(index)">
								<view class="menuAside-bottom-left-item"
									:class="{ activeItem: currentOptionIndex == index }">
									<text>{{item.name}}</text>
								</view>
							</view>
						</scroll-view>

						<!-- 左侧内容 -->
						<view class="menuAside-bottom-right">
							<template v-if="optionList[currentOptionIndex].type == 'slider'">
								<view class="slider-item">
									<u-slider v-model="optionList[currentOptionIndex].value" :blockSize="28"
										:min="optionList[currentOptionIndex].min"
										:max="optionList[currentOptionIndex].max" step="0.1" @input="movingOptionSlider"
										:showValue="true"></u-slider>
								</view>
							</template>
							<template v-if="optionList[currentOptionIndex].type == 'color'">
								<view class="color-item">
									<!-- <view class="item" :style="{'background': optionList[currentOptionIndex].value ?? ''}"></view> -->
									<progress-color :min="optionList[currentOptionIndex].min"
										:max="optionList[currentOptionIndex].max" :selectedColor.sync="selectedColor"
										@getColor="movingOptionColor"></progress-color>
								</view>
							</template>
							<template v-if="optionList[currentOptionIndex].type == 'scroll'">
								<u-scroll-list>
									<view class="scroll-list">
										<view class="scroll-list-item"
											v-for="(l, index) in optionList[currentOptionIndex].list" :key="index"
											@click="chooseOptionShape(l)">
											<image class="scroll-list-image" :src="l.thumb"></image>
											<text class="scroll-list-text">{{ l.name }}</text>
										</view>
									</view>
								</u-scroll-list>
							</template>
						</view>
					</view>
				</u-popup>
			</view>

		</view>

		<!-- 进度条 -->
		<u-overlay :show="isLoading" :z-index="9999" :opacity="0.75" :duration="400">
			<view class="progress" v-if="isLoading">
				<u-line-progress class="progress-full" :percentage="progress" activeColor="#4b5cc4"
					height="25"></u-line-progress>
			</view>
		</u-overlay>

	</view>
</template>

<script>
	import {
		GLTFLoader
	} from '@/common/three/examples/jsm/loaders/GLTFLoader.js';
	import {
		OrbitControls
	} from '@/common/three/examples/jsm/controls/OrbitControls.js';
	import {
		RoomEnvironment
	} from '@/common/three/examples/jsm/environments/RoomEnvironment.js';
	import {
		GUI
	} from '@/common/three/examples/jsm/libs/lil-gui.module.min.js';

	import Stats from '@/common/three/examples/jsm/libs/stats.module.js'; //引入性能监视器stats.js
	import progressColor from '@/components/progress-color/index.vue';

	// #ifdef MP-WEIXIN
	import {
		createScopedThreejs
	} from '@/common/threejs-miniprogram';
	import {
		registerGLTFLoader
	} from '@/common/threejs-miniprogram/loaders/gltf-loader';
	import registerOrbit from "@/common/util/orbit.js"
	// #endif


	// #ifdef MP-WEIXIN
	let THREE = null
	// #endif
	// #ifndef MP-WEIXIN
	let THREE = require('@/common/three/build/three.module.js')
	// #endif

	// tabs背景图
	const lineBg =
		"";

	export default {
		name: "modelRender",
		components: {
			progressColor
		},
		props: {
			modelUrl: { // 模型路径
				type: [String],
				default: ''
			},
		},
		data() {
			return {
				isLoading: true, // 加载
				progress: 0, // 进度条
				camera: null, // 照相机
				scene: null, // 场景
				renderer: null, // 渲染器
				controls: null, // 控制器
				container: null, // 画布容器
				sceneWidth: 0, //屏幕宽度
				sceneHeight: 0, //屏幕高度
				gui: null, // gui菜单
				stats: null, // 帧率
				model: null, // 当前模型
				wheels: [], // 材质种类
				assist: false, // 辅助条件
				selectedColor: 'hsl(0, 100%, 50%)', // 材质颜色
				tabIndex: 0, // 模型标签索引
				initial_map: [], // 物体模型初始数据
				activeOption: "", // 默认物体模型
				lineBg, // tabs背景图
				showOption: false, // 展示选项
				currentOptionIndex: 0, // 展示选项标签
				optionList: [{
					name: '金属度',
					type: 'slider',
					prop: 'metalness',
					value: 0,
					min: 0,
					max: 1,
				}, {
					name: '粗糙度',
					type: 'slider',
					prop: 'roughness',
					value: 0,
					min: 0,
					max: 1,
				}, {
					name: '透光率',
					type: 'slider',
					prop: 'transmission',
					value: 0,
					min: 0,
					max: 1,
				}, {
					name: '颜色',
					type: 'color',
					prop: 'color',
					value: '#000000',
					min: 0,
					max: 16777215,
				}, {
					name: '材质',
					type: 'scroll',
					prop: 'material',
					list: [{
						name: '基础材质',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg',
					}, {
						name: '漫反射材质',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg',
					}, {
						name: '高光材质',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg',
					}, {
						name: '物理材质',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg',
					}, {
						name: '毛绒材质',
						thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg',
					}]
				}]
			};
		},
		watch: {
			progress(val) {
				console.log(val)
				if (val >= 100) {
					this.isLoading = false
					// uni.$u.sleep(100).then(() => {
					// 	this.isLoading = false
					// })
				}
			},
		},
		mounted() {
			// #ifdef MP-WEIXIN
			wx.createSelectorQuery()
				.in(this)
				.select('#webgl')
				.node()
				.exec((res) => {
					this.container = res[0].node
					this.sceneWidth = this.container.width
					this.sceneHeight = this.container.height
					// 创建一个与 canvas 绑定的 three.js
					THREE = createScopedThreejs(this.container)
					registerGLTFLoader(THREE)
					this.init();
					// 传递并使用 THREE 变量
				})
			// #endif

			// #ifndef MP-WEIXIN
			this.init();
			// #endif

			// #ifdef H5
			window.addEventListener('resize', this.onWindowResize);
			// #endif
		},
		methods: {
			init() {
				// #ifdef H5
				this.container = document.getElementById('webgl');
				this.sceneWidth=this.container.clientWidth
				this.sceneHeight=this.container.clientHeight
				// #endif

				this.isLoading = this.modelUrl == '' ? false : true;

				if (this.assist) {
					// 创建stats对象
					this.stats = new Stats();
					//实例化一个gui对象
					this.gui = new GUI();
					this.gui.domElement.style.right = '0rpx';
					this.gui.domElement.style.width = '300rpx';

					this.container.appendChild(this.stats.domElement);
				}

				// #ifndef APP
				// 场景
				this.initScene();
				// 渲染器
				this.initRenderer();
				// #endif
				if (this.modelUrl != '') {
					// 加载模型
					this.initModel();
				}
				// #ifndef APP
				// 像机
				this.initCamera();
				// 灯光
				this.initLight();
				// 控制
				this.initControls();
				// 动画渲染
				this.animate();
				// 初始化动作交互
				this.initScript();
				// #endif
			},

			async initModel() {
				this.model = await this.loadGLTF(this.modelUrl)
				//this.model.position.set( 0, 0, 0 );
				//this.model.scale.set( 2, 2, 2 );
				this.setCenter(this.model)
				this.model.traverse((obj) => {
					if (obj.isMesh) {
						this.initial_map.push({
							name: obj.name,
							material: obj.material,
							position: obj.position,
						})

						// 初始化调试菜单
						if (this.assist) {
							this.initModelMenu(obj)
						}
						//console.log("默认材质：",obj.material)
					}
				})
				this.scene.add(this.model);
				if (this.initial_map.length > 0) {
					this.selectOption(this.initial_map[0]);
				}
				this.renderer.render(this.scene, this.camera);
			},

			initScene() {
				// 创建场景
				this.scene = new THREE.Scene();
				this.scene.background = new THREE.Color(0xbbbbbb); //背景色

				if (this.assist) {
					// 添加辅助网格
					const grid = new THREE.GridHelper(100, 20, 0xffffff, 0xffffff);
					grid.material.opacity = 0.2;
					grid.material.depthWrite = false;
					grid.material.transparent = true;
					this.scene.add(grid);
					// 添加辅助坐标系
					const axesHelper = new THREE.AxesHelper(100);
					this.scene.add(axesHelper);
				}
				// 给场景加个地板
				let floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
				let floorMaterial = new THREE.MeshPhongMaterial({
					color: 0xeeeeee,
					shininess: 0,
				});
				let floor = new THREE.Mesh(floorGeometry, floorMaterial);
				floor.rotation.x = -0.5 * Math.PI;
				floor.receiveShadow = true;
				floor.position.y = -1;
				this.scene.add(floor);

			},

			initRenderer() {
				const width = this.sceneWidth //窗口宽度
				const height = this.sceneHeight; //窗口高度

				this.renderer = new THREE.WebGLRenderer();
				this.renderer.setSize(width, height); //设置渲染区域尺寸
				//this.renderer.outputEncoding = THREE.sRGBEncoding;
				//renderer.setClearColor(0xb9d3ff, 0.4); // 设置背景颜色透明度
				//设置的设备像素比
				// #ifdef MP-WEIXIN
				this.renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
				// #endif
				// #ifdef H5
				this.renderer.setPixelRatio(window.devicePixelRatio);
				// 添加环境效果
				const environment = new RoomEnvironment();
				const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
				this.scene.environment = pmremGenerator.fromScene(environment).texture;
				environment.dispose();
				// #endif

				// #ifndef MP-WEIXIN
				this.container.appendChild(this.renderer.domElement);
				// #endif
			},

			initControls() {
				// 添加控制器
				// #ifdef MP-WEIXIN
				const {
					OrbitControls
				} = registerOrbit(THREE)
				// #endif
				
				// #ifndef APP
				this.controls = new OrbitControls(this.camera, this.renderer.domElement)
				//是否开启右键拖拽
				this.controls.enablePan = true;
				//是否可以缩放
				this.controls.enableZoom = true;
				//设置相机距离原点的最近距离
				this.controls.minDistance = 2;
				//设置相机距离原点的最远距离
				this.controls.maxDistance = 100;
				// #endif
				
				// #ifndef MP-WEIXIN
				this.controls.addEventListener('change', this.render);
				// #endif
				this.controls.update();
			},

			initCamera() {
				// 定义正投影相机
				const width = this.sceneWidth; //窗口宽度
				const height = this.sceneHeight; //窗口高度
				
				let k = width / height; //窗口宽高比
				let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
				//创建相机对象
				//let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
				this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 100);
				this.camera.position.set(2, 2, 0); //设置相机位置
				this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
			},

			initLight() {
				// 半球光
				const hemiLight = new THREE.HemisphereLight();
				hemiLight.intensity = 0.3
				this.scene.add(hemiLight);
				// 环境光
				const ambientLight = new THREE.AmbientLight(0xffffff, 1);
				this.scene.add(ambientLight);
				// 平行光
				const light = new THREE.DirectionalLight(0xffffff, 1);
				light.position.set(50, 50, 50);
				this.scene.add(light);
				// 点光源
				const pointLight = new THREE.PointLight(0xffffff, 3);
				this.scene.add(pointLight);
			},

			async loadGLTF(url) {
				// #ifdef MP-WEIXIN || APP
				url = "http://localhost" + url;
				// #endif
				this.progress = 0;
				try {
					// #ifdef MP-WEIXIN
					let loader = new THREE.GLTFLoader();
					// #endif
					// #ifndef MP-WEIXIN
					let loader = new GLTFLoader();
					// #endif
					const gltf = await new Promise((resolve, reject) => {
						loader.load(url,
							// 加载完成后回调
							gltf => {
								resolve(gltf);
							},
							// 加载进度回调
							xhr => {
								this.progress = Math.round((xhr.loaded / xhr.total) * 100);
							},
							// 加载错误回调
							error => {
								reject(error);
							});
					});
					return gltf.scene;
				} catch (error) {
					console.error('加载模型错误：' + error);
					console.log("模型请求路径出错：" + this.modelUrl);
					this.isLoading = false;
				}
			},

			initMaterial() {
				// 物理基准材质(PBR材质)
				const standardMaterial = new THREE.MeshStandardMaterial({
					color: 0xff0000,
					metalness: 1.0, //金属度属性
					roughness: 0.5, //表面粗糙度
				});
				this.wheels.add(standardMaterial)
				// 物理材质(PBR材质)
				const physicalMaterial = new THREE.MeshPhysicalMaterial({
					color: 0x00ffff,
					metalness: 0.9, //金属度
					roughness: 0.5, //粗糙度
					clearcoat: 1.0, //物体表面清漆层或者说透明涂层的厚度
					clearcoatRoughness: 0.1, //透明涂层表面的粗糙度
					transmission: 1.0, //玻璃材质透光率，
					ior: 1.5, //折射率
				});
				this.wheels.add(physicalMaterial)
				// 基础材质
				const basicMaterial = new THREE.MeshBasicMaterial({
					color: 0xff0000,
				});
				this.wheels.add(basicMaterial)
				// 高光材质(聚光)
				const phongMaterial = new THREE.MeshPhongMaterial({
					color: 0xff0000,
					shininess: 20,
					specular: 0x444444, //高光部分的颜色
				})
				this.wheels.add(phongMaterial)
				// 漫反射材质(散光)
				const lambertMaterial = new THREE.MeshLambertMaterial({
					color: 0xff0000,
				})
				this.wheels.add(lambertMaterial)
			},

			initModelMenu(obj) {
				const folder = this.gui.addFolder(obj.name);
				// 配置材质菜单
				if (obj.material instanceof THREE.MeshPhysicalMaterial) {
					folder.addColor({
						color: obj.material.color
					}, 'color').name("颜色");
					folder.add(obj.material, 'metalness', 0, 1).name("金属度");
					folder.add(obj.material, 'roughness', 0, 1).name("粗糙度");
					folder.add(obj.material, 'transmission', 0, 1).name("透光率");
					folder.add(obj.material, 'ior', 0, 3).name("折射率");
				} else if (obj.material instanceof THREE.MeshStandardMaterial) {
					folder.addColor({
						color: obj.material.color,
					}, 'color').name("颜色");
				}
				folder.close(); //关闭菜单
			},

			//执行渲染操作   指定场景、相机作为参数
			render() {
				this.renderer.render(this.scene, this.camera);
			},

			animate() {
				this.stats && this.stats.update();
				this.controls && this.controls.update();
				this.render();
				// #ifdef MP-WEIXIN
				this.container.requestAnimationFrame(this.animate);
				// #endif
				// #ifndef MP-WEIXIN
				requestAnimationFrame(this.animate);
				// #endif
			},

			initScript() {
				let that = this
				this.renderer.domElement.addEventListener('click', function(event) {
					// .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
					const px = event.offsetX;
					const py = event.offsetY;
					//屏幕坐标px、py转WebGL标准设备坐标x、y
					//width、height表示canvas画布宽高度
					const width = that.container.clientWidth;
					const height = that.container.clientHeight;
					const x = (px / width) * 2 - 1;
					const y = -(py / height) * 2 + 1;
					//创建一个射线投射器`Raycaster`
					const raycaster = new THREE.Raycaster();
					//.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
					// 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
					raycaster.setFromCamera(new THREE.Vector2(x, y), that.camera);
					//.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
					// 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
					const intersects = raycaster.intersectObjects(that.model.children);
					// intersects.length大于0说明，说明选中了模型
					if (intersects.length > 0) {
						// 选中模型的第一个模型
						let obj = intersects[0].object;
						// 修改模型标签
						for (let i = 0; i < that.initial_map.length; i++) {
							if (that.initial_map[i].name == obj.name) {
								that.tabIndex = i;
							}
						}
						// 选中模型
						that.pickModel(obj);
					}
				})


			},
			// 设置模型位置
			setCenter(theObject) {
				let root = theObject; //this.scene;
				let box = new THREE.Box3().setFromObject(root);
				let temp = new THREE.Vector3();
				let center = box.getCenter(new THREE.Vector3());
				let size = box.getSize(new THREE.Vector3());
				// console.log('old center,size:', center, size);
				let maxAxis = Math.max(size.x, size.y, size.z);
				root.scale.multiplyScalar(1 / maxAxis); //模型显示大小可调整参数 5 
				box.setFromObject(root);
				//center = box.getCenter(new THREE.Vector3());
				size = box.getSize(new THREE.Vector3());
				center = new THREE.Vector3()
				root.position.sub(center); // 位置居中
				// console.log('new center,size:', center, size);
			},

			// 选中模型
			pickModel(item) {
				this.showOption = true;
				this.currentOptionIndex = 0;
				this.selectOption(item);
			},

			// 选择模型属性
			selectOption(item) {
				this.activeOption = item.name;
				let material = item.material;
				this.optionList.forEach((option, index) => {
					if (option.type == 'slider') {
						option.value = 0;
						if (material[option.prop]) {
							option.value = Number(material[option.prop]).toFixed(1)
						}
					} else if (option.type == 'color') {
						option.value = "#" + material[option.prop].getHexString();
					}
				})


				// this.initial_map.forEach(ele=>{
				// 	if(ele.name==item.name){
				// 		//setCameraPosition(ele.position,camera.position)
				// 	}
				// })
			},

			movingOptionColor(value) {
				this.optionList[this.currentOptionIndex].value = value
				this.model.traverse((obj) => {
					if (obj.isMesh && obj.name == this.activeOption) {
						obj.material.color.set(value);
					}
				});
			},
			// 滑动选择器设置模型属性
			movingOptionSlider(value) {
				this.optionList[this.currentOptionIndex].value = value;
				this.model.traverse((obj) => {
					if (obj.isMesh && obj.name == this.activeOption) {
						obj.material[this.optionList[this.currentOptionIndex].prop] = value;
					}
				});
			},
			// 横向滚动列表选择模型属性
			chooseOptionShape(item) {
				console.log('点击了', item.name)
			},
			// 关闭底部弹出层
			closePopup() {
				this.showOption = false;
			},
			//点击左侧按钮
			tapselect(index) {
				this.currentOptionIndex = index;
			},
			onWindowResize() {
				const width = this.container.clientWidth; //canvas画布宽度
				const height = this.container.clientHeight; //canvas画布高度
				// 1. WebGL渲染器渲染的Cnavas画布尺寸更新
				this.renderer.setSize(width, height);
				// 2.1.更新相机参数
				// const k = width / height; //canvas画布宽高比
				// camera.left = -s*k;
				// camera.right = s*k;
				this.camera.aspect = width / height;
				// 2.2.相机的left, right, top, bottom属性变化了，通知threejs系统
				this.camera.updateProjectionMatrix();
			},
			// #ifdef MP-WEIXIN
			touchStart(e) {
				this.container.dispatchTouchEvent({
					...e,
					type: 'touchstart'
				})
			},
			touchMove(e) {
				this.container.dispatchTouchEvent({
					...e,
					type: 'touchmove'
				})
			},
			touchEnd(e) {
				this.container.dispatchTouchEvent({
					...e,
					type: 'touchend'
				})
			},
			// #endif
			
			// #ifdef APP
			refeshContainer(data){
				this.container = data.container;
				this.renderer = data.renderer;
				this.camera = data.camera;
				this.scene = data.scene;
				this.controls = data.controls;
				console.log(data)
			}
			// #endif
		},
		beforeDestroy() {
			// 移除绑定的事件监听
			// #ifdef H5
			window.removeEventListener('resize', this.onWindowResize);
			// #endif
		},
	}
</script>

<!-- #ifdef APP -->
<script lang="renderjs" module="three">
	export default {
		mounted() {
			
		},
		methods: {
			init() {
				let container = document.getElementById('webgl');
				let width = container.clientWidth;
				let height = container.clientHeight;
				let renderer = new THREE.WebGLRenderer();
				renderer.setSize(width, height); //设置渲染区域尺寸
				container.appendChild(renderer.domElement);
				
				// 创建场景
				let scene = new THREE.Scene();
				scene.background = new THREE.Color(0xbbbbbb); //背景色
				// 给场景加个地板
				let floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
				let floorMaterial = new THREE.MeshPhongMaterial({
					color: 0xeeeeee,
					shininess: 0,
				});
				let floor = new THREE.Mesh(floorGeometry, floorMaterial);
				floor.rotation.x = -0.5 * Math.PI;
				floor.receiveShadow = true;
				floor.position.y = -1;
				scene.add(floor);
				
				let k = width / height; //窗口宽高比
				let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
				//创建相机对象
				let camera = new THREE.PerspectiveCamera(45, width / height, 1, 100);
				camera.position.set(2, 2, 0); //设置相机位置
				camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
				
				let controls = new OrbitControls(camera, renderer.domElement)
				//是否开启右键拖拽
				controls.enablePan = true;
				//是否可以缩放
				controls.enableZoom = true;
				//设置相机距离原点的最近距离
				controls.minDistance = 2;
				//设置相机距离原点的最远距离
				controls.maxDistance = 100;
				
				
				
				// animate() {
				// 	this.stats && this.stats.update();
				// 	this.controls && this.controls.update();
				// 	this.render();
				// 	// #ifdef MP-WEIXIN
				// 	this.container.requestAnimationFrame(this.animate);
				// 	// #endif
				// 	// #ifndef MP-WEIXIN
				// 	requestAnimationFrame(this.animate);
				// 	// #endif
				// },
				this.$ownerInstance.callMethod("refeshContainer",{container,renderer,controls,camera,scene})
				
				
			}
		},
	}
</script>
<!-- #endif -->


<style lang="scss" scoped>
	.body {
		padding-top: 120rpx;
		height: calc(100vh - 120rpx);
	}

	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.menuAside-top {
		width: 100%;
		height: 7%;
		background: #fff;
		padding: 20rpx 10rpx;

		.title {
			font-size: 24rpx;
		}
	}


	.canvas-container {
		width: 100%;
		flex: 1;
	}

	.menuAside-bottom {
		width: 100%;

		.menuAside-bottom-content {
			display: flex;
			height: 230rpx;
		}

		.menuAside-bottom-left {
			width: 25%;
			background: #f4f4f4;
			height: 100%;

			.menuAside-bottom-left-item {
				background: #f4f4f4;
				height: 100rpx;
				display: flex;
				align-items: center;
			}

			.menuAside-bottom-left-item.activeItem {
				background: #fff;
			}

			.menuAside-bottom-left-item text {
				width: 196rpx;
				font-size: 28rpx;
				display: block;
				text-align: center;
			}
		}

		.menuAside-bottom-right {
			flex: 1;
			width: 75%;
			height: 100%;

			.slider-item {
				padding-top: 70rpx;
				padding-left: 50rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
			}

			.color-item {
				padding-top: 110rpx;
				padding-left: 50rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
			}

			.scroll-list {
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: row;
				padding-top: 36rpx;
				padding-left: 10rpx;
				box-sizing: border-box;

				&-item {
					padding-right: 25rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
				}

				&-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				&-text {
					margin-top: 10rpx;
					color: #606266;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}

	::v-deep .uni-slider-handle-wrapper {
		height: 20rpx;
	}

	// 横向滚动列表indicator=false有问题，手动隐藏
	::v-deep .u-scroll-list__indicator {
		display: none;
	}

	.progress {
		// @include flex;
		// justify-content: center;
		// align-items: center;
		// flex: 1;

		.progress-full {
			position: absolute;
			top: 50%;
			left: 5%;
			right: 5%;
			width: 85%;
			z-index: 9999;
		}
	}

	// @media screen and (orientation: content) {
	//   .content {
	//     background-color: #00f;
	//   }
	// }
</style>